<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"
    id="add">
    <div class="modal-dialog modal-lg-f modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">             
                <h4 class="modal-title" id="myModalLabel">角色管理 — 新增</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <form #newlyAddedForm="ngForm" novalidate>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">角色编码：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="roleCode" class="form-control" [(ngModel)]="roleadd.roleCode" pattern="^[a-zA-Z\d\u4E00-\u9FA5_]+$" minlength="1" maxlength="20" #roleCode=ngModel placeholder="输入角色编码" required />
                            <label class="red required">*</label>
                            <div *ngIf="roleCode.invalid && (roleCode.touched)" class="error-alert">
                                <div *ngIf="roleCode.errors.required">
                                    <small class="error">请输入角色编码</small>
                                </div>
                                <div *ngIf="roleCode.errors.minlength || roleCode.errors.maxlength">
                                    <small class="error"> 角色编码长度在1-20之间</small>
                                </div>
                                <small class="error" *ngIf="roleCode.errors?.pattern ">不能输入特殊符号,允许输入_</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">角色名称：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="roleName" class="form-control" [(ngModel)]="roleadd.roleName" minlength="1" maxlength="20" pattern="^[a-zA-Z\d\u4E00-\u9FA5_]+$" #roleName=ngModel placeholder="输入角色名称" required />
                            <label class="red required">*</label>
                            <div *ngIf="roleName.invalid && (roleName.touched)" class="error-alert">
                                <div *ngIf="roleName.errors.required">
                                    <small class="error">请输入角色名</small>
                                </div>
                                <div *ngIf="roleName.errors.minlength || roleName.errors.maxlength">
                                    <small class="error"> 角色名长度在1-20之间</small>
                                </div>
                                <small class="error" *ngIf="roleCode.errors?.pattern ">不能输入特殊符号,允许输入_</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group height-auto">
                        <label class="col-xs-12 col-sm-3 control-label text-right">角色组：</label>
                        <div class="col-xs-12 col-sm-9">
                            <select class="form-control" name='roleGroupName' #roleGroupName=ngModel [(ngModel)]="roleadd.roleGroupName" (change)="test(roleadd.roleGroupName)" required>
                                <!-- <option value="">请选择</option> -->
                                <option *ngFor="let item of roleadddata" [value]='item.roleGroupId'>{{item.roleGroupName}}</option>
                            </select>
                            <div *ngIf="roleGroupName.invalid && (roleGroupName.dirty || roleGroupName.touched)" class="error-alert">
                                <div *ngIf="roleGroupName.errors.required">
                                    <small class="error">请选择角色组</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group height-auto">
                        <label class="col-xs-12 col-sm-3 control-label text-right">自动分配：</label>
                        <div class="col-xs-12 col-sm-9">
                            <!-- <select name="autoAssignment" #autoAssignment=ngModel [(ngModel)]="roleadd.autoAssignment" required>
                                <option value=null>请选择</option>
                                <option value="0">不是</option>
                                <option value="1">是</option>
                            </select> -->
                            <label class="toggle toggle-positive">
                                <input type="checkbox" name="autoAssignment" #autoAssignment=ngModel [(ngModel)]="roleadd.autoAssignment" >
                                <div class="track">
                                    <div class="tit" *ngIf="roleadd.autoAssignment">是</div>
                                    <div class="tit right" *ngIf="!roleadd.autoAssignment">不是</div>
                                    <div class="handle"></div>
                                </div>
                            </label>  
                            <!-- <div *ngIf="autoAssignment.invalid && (autoAssignment.dirty || autoAssignment.touched)" class="error-alert">
                                <div *ngIf="autoAssignment.errors.required">
                                    <small class="error">请选择自动分配</small>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <div class="form-group height-auto">
                        <label class="col-xs-12 col-sm-3 control-label text-right">描述：</label>
                        <div class="col-xs-12 col-sm-9">
                            <textarea rows="5" type="text" placeholder="描述" name="description" #description=ngModel class="form-control" [(ngModel)]="roleadd.description"
                            placeholder="描述长度在0-50个汉字之间" minlength="0" maxlength="50"
                            ></textarea>
                            <div *ngIf="description.invalid" class="error-alert text-left">
                                <div *ngIf="description.errors.minlength || description.errors.maxlength">
                                    <small class="error "> 描述长度在0-50之间</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>   
            </div>
            <div class="modal-footer modal-footer-30">
                <button type="button" class="btn btn-default" mat-raised-button (click)="reset()">取消</button>
                <button type="button" class="btn btn-primary" mat-button [disabled]="roleCode.invalid || roleName.invalid || roleGroupName.invalid "
                    (click)="add()"><span class="glyphicon glyphicon-plus"></span> 新增</button>
            </div>
        </div>
    </div>
</div>
<!-- 新增 END -->